<template>
	<div class="cloneContainer">
		<div class="header">
			<a-input-search v-model:value="searchData['search_AND_LIKE_title']" :placeholder="t('control','请输入标题')" style="width: 240px" @search="show" />
			<!-- <a-button type="primary" @click="getNum" class="count-btn">
				<BellOutlined class="bell-icon" />
				未读消息数量
			</a-button> -->
		</div>
		<div class="content">
			<div class="list" style="position:relative">
				<div class="item" v-for="item in listData" :key="item.id" @click="()=>handleDetail(item.id)">
					<div class="item-header">
						<div class="item-title">
							<div class="title-text">
								<span v-if="item.readStatus === 0" class="unread-badge"></span>
								{{ item.title }}
							</div>
							<div class="publish-time">
								<ClockCircleOutlined class="time-icon" />
								{{ item.publishTime }}
							</div>
						</div>
						<div class="action-icons">
							<div class="mark-read" v-if="item.readStatus==0">
								<CheckCircleOutlined @click="()=>markMsgRead(item.id)" />
							</div>
							<div class="delete">
								<DeleteOutlined @click="()=>deleteMsg(item.id)" />
							</div>
						</div>
					</div>
					<div class="item-content">
						<div class="digest">{{ item.digest || item.content }}</div>
						<!-- <a-button type="primary" class="detail-btn" @click="()=>handleDetail(item.id)">
							<EyeOutlined class="eye-icon" />
							查看详情
						</a-button> -->
					</div>
				</div>
				<div class="noData" v-if="!listData.length">
					<BellOutlined class="icon" />
					<span class="no-data-text">{{ t('common','暂无') }}</span>
					<!-- <span class="no-data-desc">有新消息时会第一时间通知您</span> -->
				</div>
			</div>
			<a-pagination 
				:hideOnSinglePage="false"
				class="pagination"
				@change="show" 
				v-model:current="pagination.current" 
				show-size-changer  
				v-model:pageSize="pagination.size"
				:total="pagination.totalElements" 
			/>
		</div>
		<a-drawer
			title=""
			width="45%"
			placement="right"
			:closable="false"
			v-model:open="drawer.visible"
		>
			<div class="drawerBox">
				<div class="title">{{ drawer.data.title }}</div>
				<div class="date">
					<CalendarOutlined class="calendar-icon" />
					{{ t('control','发布时间') }}：{{ drawer.data.publishTime }}
				</div>
				<template v-if="drawer.data.digest">
					<div class="reply">{{ t('control','摘要') }}</div>
					<div class="reason" style="min-height:115px">
						<div class="text" >{{ drawer.data.digest }}</div>
					</div>
				</template>
				<div class="reply">{{ t('control','内容') }}</div>
				<div class="reason">
					<div class="text">{{ drawer.data.content||'' }}</div>
				</div>
			</div>
		</a-drawer>
	</div>
</template>
<script setup>
import { reactive, ref ,onMounted} from 'vue'
import { message } from 'ant-design-vue'
import { BellOutlined, CheckCircleOutlined, ClockCircleOutlined, EyeOutlined, CalendarOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import {
		isTeacher,refreshStudentNotice,refreshTeacherNotice
	} from "@/stores/info"
import { useRouter, useRoute } from 'vue-router'
import {getStudentMessageList,getTeacherMessageList,getStudentMessageDetail,getTeacherMessageDetail,markStudentMessageAsRead,deleteStudentMessage,markTeacherMessageAsRead,deleteTeacherMessage,getTeacherUnreadMessageNum} from '@/request/notice/message'
import { t } from '@/i18n'

const route=useRoute()
const drawer = reactive({ visible: false, data: {} })

function refreshNotice(){
	if(isTeacher()){
		refreshTeacherNotice()
	}else{
		refreshStudentNotice()
	}
}

onMounted(()=>{
	searchData.value['search_AND_EQ_category']=route.meta.value
	console.log(searchData.value)
	show()
})

const listData = ref([])
const searchData = ref({})
const pagination = ref({ totalElements: 11, current: 1, size: 10 })
const show = async () => {
	let req = {
		...pagination.value,
		page: pagination.value.current - 1,
		...searchData.value
	}
	let res
	if(isTeacher()){
		res=await getTeacherMessageList(req)
	}else{
		res=await getStudentMessageList(req)
	}
	console.log('res',res)
	if (!res) return
	listData.value = [...res.data.content]
	pagination.value = {
		...pagination.value,
		...res.data.page,
		current:res.data.page.number+1
	}
}


const handleDetail = async (id) => {
	let res
	if(isTeacher()){
		res=await getTeacherMessageDetail(id)
	}else{
		res=await getStudentMessageDetail(id)
	}
	console.log('消息详情',res)
	if(!res) return
	drawer.data = res.data
	drawer.visible = true
	await markMsgRead(id)
}

const markMsgRead = async (id) => {
	let res
	if(isTeacher()){
		res=await markTeacherMessageAsRead(id)
	}else{
		res=await markStudentMessageAsRead(id)
	}
	console.log('标记已读',res)
	if(!res) return
	refreshNotice()
	show()
}
const deleteMsg = async (id) => {
	let res
	if(isTeacher()){
		res=await deleteTeacherMessage(id)
	}else{
		res=await deleteStudentMessage(id)
	}
	console.log('',res)
	if(!res) return
	refreshNotice()
	show()
}




</script>

<style lang="scss" scoped>
.cloneContainer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	// background: #fff;
	// padding: 32px;
	padding: 10px;
	// border-radius: 16px;
	// box-shadow: 0 4px 16px rgba(0,0,0,0.08);

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
		border-radius: 16px;
		height: 84px;
		padding: 24px;
		border:1px solid rgba(0,0,0,0.06);
		box-shadow: 0 2px 8px rgba(0,0,0,0.04);

		.count-btn {
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 15px;
			height: 40px;
			padding: 0 20px;
			border-radius: 8px;
			
			.bell-icon {
				font-size: 16px;
			}
		}
	}

	.content {
		margin-top: 24px;
		padding: 28px;
		overflow: auto;
		flex: 1;
		display: flex;
		flex-direction: column;
		background: white;
		border-radius: 16px;
		border:1px solid rgba(0,0,0,0.06);
		box-shadow: 0 2px 8px rgba(0,0,0,0.04);

		.list {
			width: 100%;
			flex: 1;
			min-height: 0;
			overflow: auto;
			padding: 12px 0;
			display: flex;
			flex-direction: column;
			gap: 24px;

			.item {
				width: 100%;
				padding: 28px;
				border-radius: 16px;
				background: #fff;
				cursor: pointer;
				position: relative;
				box-shadow: 0 2px 8px rgba(0,0,0,0.06);
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

				&:hover {
					background:  rgba(175, 165, 192,  0.1);
					// background:  rgba(128, 94, 143, 0.1);
					
					.action-icons {
						opacity: 1;
					}
				}

				.item-header {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					margin-bottom: 32px;

					.item-title {
						display: flex;
						align-items: center;
						gap: 16px;

						.title-text {
							font-size: 17px;
							font-weight: 600;
							color: #1f2329;
							display: flex;
							align-items: center;
							gap: 12px;

							.unread-badge {
								width: 10px;
								height: 10px;
								background: #f53f3f;
								border-radius: 50%;
								display: inline-block;
								box-shadow: 0 0 0 3px rgba(245,63,63,0.2);
							}
						}

						.publish-time {
							display: flex;
							align-items: center;
							gap: 6px;
							font-size: 14px;
							color: #86909c;

							.time-icon {
								font-size: 15px;
							}
						}
					}
				}

				.item-content {
					margin-top: 20px;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					gap: 32px;

					.digest {
						color: #4e5969;
						line-height: 1.7;
						flex: 1;
						font-size: 15px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.detail-btn {
						flex-shrink: 0;
						border-radius: 8px;
						transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
						height: 40px;
						padding: 0 20px;
						display: flex;
						align-items: center;
						gap: 8px;
						font-size: 15px;

						.eye-icon {
							font-size: 16px;
						}

						&:hover {
							transform: translateY(-2px);
							box-shadow: 0 4px 12px rgba(22,119,255,0.3);
						}
					}
				}

				.action-icons {
					position: absolute;
					top: 20px;
					right: 20px;
					opacity: 0;
					transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
					display: flex;
					gap: 12px;

					.mark-read, .delete {
						cursor: pointer;
						color: #1677ff;
						font-size: 18px;
						padding: 10px;
						border-radius: 50%;
						background: rgba(22,119,255,0.08);
						transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

						&:hover {
							color: #4096ff;
							background: rgba(22,119,255,0.16);
							transform: scale(1.1);
						}
					}

					.delete {
						color: #f53f3f;
						background: rgba(245,63,63,0.08);

						&:hover {
							color: #f76560;
							background: rgba(245,63,63,0.16);
						}
					}
				}
			}
		}

		.pagination {
			margin-top: 24px;
			text-align: center;
		}
	}

	.noData {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 100%;
		color: #86909c;
		padding: 48px 0;
		
		.icon {
			font-size: 72px;
			margin-bottom: 28px;
			color: #c9cdd4;
		}

		.no-data-text {
			font-size: 18px;
			font-weight: 500;
			margin-bottom: 12px;
		}

		.no-data-desc {
			font-size: 14px;
			color: #9ba1aa;
		}
	}
}

.drawerBox {
	height: 100%;
	display: flex;
	flex-direction: column;
	color: #1f2329;
	padding: 32px;

	.title {
		font-size: 26px;
		font-weight: 600;
		color: #1f2329;
		line-height: 1.4;
	}

	.date {
		margin-top: 20px;
		color: #86909c;
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 15px;

		.calendar-icon {
			font-size: 16px;
		}
	}

	.reply {
		margin-top: 32px;
		font-weight: 600;
		color: #1f2329;
		font-size: 17px;
	}

	.reason {
		margin-top: 16px;
		background: #f7f8fa;
		padding: 20px;
		border-radius: 12px;
		word-wrap: break-word;
		max-height: 100%;
		overflow: auto;

		.text {
			line-height: 1.7;
			color: #4e5969;
			font-size: 15px;
		}
	}
}
</style>